<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue下的form管理</title>
</head>
<body>

<div id="app">

    <form>
        <div>
            员工姓名:<input v-model="emp.name">
        </div>
        <div>
            员工年龄:<input v-model="emp.age">
        </div>
        <div>
             员工部门:
             <select v-model="emp.dept.id">
                  <option v-for="dept in depts" :value="dept.id">{{dept.name}}</option>
             </select>
        </div>
        <button type="button" @click="btnSaveClick">
            确认
        </button>
    </form>

    {{emp.name}} - {{emp.age}}-{{emp.dept.id}}

</div>

</body>
<script src="../../../lib/vue.global.js"></script>
<script>

    const app = {
        data() {
            return {
                emp: {
                    name: '',
                    age: -1,
                    dept: {
                        id: 2
                    }
                },
                depts: [
                    {
                        id: 1,
                        name: 'dev'
                    }, {
                        id: 2,
                        name: 'test'
                    }, {
                        id: 3,
                        name: 'hr'
                    }
                ]
            }
        }, methods: {
            btnSaveClick() {
                console.log(this.emp)
            }
        }
    }

    Vue.createApp(app).mount('#app');


</script>
</html>